<template>
	<view>
		<view class="home_tab">
		 <!-- 分段器 -->
		 <view class="tab_left">
		 <uni-segmented-control 
		 :current="current" 
		 :values="items.map((item)=>item.title)" 
		 @clickItem="onClickItem" 
		 styleType="text" 
		 activeColor="#d4237a">
		 </uni-segmented-control>
		 </view>
		 <view class="tab_right">
            <view class="iconfont iconsearch-copy"></view>
		 </view>
       </view>
		 <view class="home_content">
            <view v-if="current === 0">
                       <homeRecommend></homeRecommend>
            </view>
            <view v-if="current === 1">
              		<homeCategory></homeCategory>
            </view>
            <view v-if="current === 2">
               	<homeNew></homeNew>
            </view>
			<view v-if="current === 3">
				    <homeAlbum></homeAlbum>
            </view>
        </view>
	</view>
</template>

<script>
import  homeAlbum  from "./home-album";
import  homeCategory  from "./home-category";
import  homeNew  from "./home-new";
import  homeRecommend  from "./home-recommend";
import {uniSegmentedControl} from '@dcloudio/uni-ui'
	export default {
		components: {
			homeAlbum,
			homeCategory,
			homeNew,
			homeRecommend,
			uniSegmentedControl
		},
		data() {
			return {
				  items: [
					  {title:"推荐"},
					  {title:"分类"},
					  {title:"最新"},
					  {title:"专辑"}
					  ], 
				  current:0
			}
		},
		onLoad() {

		},
		methods: {
          onClickItem(e){
			  console.log(e)
			  /**默认显示第1个点击那个把那个传过来 */
            if(this.current !== e.currentIndex){
                this.current = e.currentIndex  
			}
		  }
		}
	}
</script>

<style lang="scss">
    .home_tab{
		display: flex;
		justify-content: flex-end;
		  align-items: center;
	   .tab_left{
		   flex: 6;
		   margin-left: 150rpx;
	   }
	   .tab_right{
		    flex: 1;
			margin-left: 100rpx;
	   }
	}
</style>
